<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('详情页')" />
    <style type="text/css">.user-info-head{position:relative;display:inline-block;}.user-info-head:hover:after{content:'\f030';position:absolute;left:0;right:0;top:0;bottom:0;color:#eee;background:rgba(0,0,0,0.5);font-family:FontAwesome;font-size:24px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer;line-height:110px;border-radius:50%;}</style>
</head>
<body class="gray-bg" style="font: 14px Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif !important;">
<section class="section-content">
    <div class="row">
        <div class="col-sm-4 pr5">
            <div class="ibox float-e-margins">
                <div class="ibox-title ibox-title-gray dashboard-header gray-bg">
                    <h5>商品详情</h5>
                </div>
                <div class="ibox-content">
                    <ul class="list-group list-group-striped">
                        <li class="list-group-item"><i class="fa fa-shopping-cart"></i>
                            <b class="font-noraml">商品编号：</b>
                            <p class="pull-right"><span th:text="${sysGoods.getId()}"></span></p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-code"></i>
                            <b  class="font-noraml">商品名称：</b>
                            <p class="pull-right"><span th:text="${sysGoods.getName()}"></span></p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-yen"></i>
                            <b  class="font-noraml">商品价格：</b>
                            <p class="pull-right"><span th:text="${sysGoods.getPrice()}"></span></p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-bank"></i>
                            <b  class="font-noraml">公司：</b>
                            <p class="pull-right"><span th:text="${sysGoods.getCom()}"></span></p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-500px"></i>
                            <b  class="font-noraml">商品库存：</b>
                            <p class="pull-right"><span th:text="${sysGoods.getStock()}"></span></p>
                        </li>
                        <li class="list-group-item"><i class="fa fa-calendar"></i>
                            <b  class="font-noraml">创建时间：</b>
                            <p class="pull-right">
                                <span th:text="${#dates.format(sysGoods.getCreateTime(), 'yyyy-MM-dd')}"></span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-sm-8 about">
            <div class="ibox float-e-margins">
                <div class="ibox-title ibox-title-gray dashboard-header">
                    <h5>价格图示</h5>
                </div>
                <div class="ibox-content">

                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                    <div id="main" style="width: 500px;height:300px;"></div>

                </div>
            </div>
        </div>
    </div>
</section>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/plugins/echarts/echarts.min.js}"></script>

    <th:block th:include="include :: footer" />
    <script>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        var num1= randomNum(300,600);
        var num2= randomNum(300,600);
        var num3= randomNum(300,600);
        var num4= randomNum(300,600);


        option = {
            xAxis: {
                type: 'category',
                data: ['第三季度', '第四季度', '第一季度', '第二季度']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [num1, num2, num3, num4],
                type: 'line'
            }]
        };

        option && myChart.setOption(option);


        function randomNum(minNum,maxNum){
            switch(arguments.length){
                case 1:
                    return parseInt(Math.random()*minNum+1,10);
                    break;
                case 2:
                    return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
                    break;
                default:
                    return 0;
                    break;
            }
        }

    </script>

</body>
</html>